<template>
  <div class="single-double-record">
    <div class="flex flex-center bcl-black box">
      <div class="title title--bg">下单明细</div>
    </div>

    <div class="box" v-if="records.length">
      <ul class="record-list">
        <li
          class="record-list__item box radius mb-10 lh-2"
          v-for="(v, i) in records"
          :key="i"
        >
          <div>
            <span>下单金额：</span>
            <span class="cl-linear">{{ v.placeAmount }} PC</span>
          </div>

          <div class="flex flex-rb">
            <div style="width: 45%">
              <span>下单方向：</span>
              <span class="cl-linear">{{ v.typeName }}</span>
            </div>
            <div style="width: 55%">
              <span>中奖金额：</span>
              <span v-if="v.loading">正在获取</span>
              <span v-else-if="v.getAmount === -1">未中奖</span>
              <span class="cl-linear" v-else-if="v.getAmount">
                {{ v.getAmount }} PC
              </span>
            </div>
          </div>

          <div class="flex flex-rb">
            <div style="width: 45%">
              <span>下单区块：</span>
              <span>{{ v.height }}</span>
            </div>
            <div style="width: 55%">
              <span>开奖区块：</span>
              <span>{{ v.getHeight }}</span>
            </div>
          </div>

          <div>
            <span>开奖哈希：</span>
            <span v-if="v.loading">正在获取</span>
            <span v-else>{{ v.hash }}</span>
          </div>

          <div>
            <span>下单时间：</span>
            <span>{{ formatDateTime(v.timestamp) }}</span>
          </div>

          <!-- 刷新按钮 -->
          <van-icon
            class="refresh-btn click"
            name="replay"
            @click="searchGet(i, v.getHeight, true)"
            v-if="!v.getAmount"
          ></van-icon>
        </li>
      </ul>

      <!-- 分页 -->
      <van-pagination
        class="mt-20"
        mode="simple"
        :total-items="total"
        :items-per-page="size"
        @change="getRecordList"
        v-model="page"
      ></van-pagination>
    </div>

    <van-empty description="暂无数据" v-else></van-empty>
  </div>
</template>

<script>
import { toNumber, formatDateTime } from '@/assets/js/utils'
import mitt from '@/assets/js/mitt'
import apis from '@/assets/js/apis'

export default {
  data() {
    return {
      // 列表
      records: [],
      page: 1,
      size: 10,
      total: 0,
    }
  },

  mounted() {
    this.getRecordList()

    mitt.$on('refresh', () => {
      setTimeout(() => {
        this.page = 1
        this.getRecordList()
      }, 3000)
    })
  },

  methods: {
    // 获取下单明细记录
    async getRecordList() {
      const params = {
        fromAddress: window.fromAddress,
        page: this.page - 1,
        size: this.size,
      }

      const { pagination, tx_responses } = await apis.getRecordList(params)

      tx_responses.filter((v) => {
        return v.tx.body.messages[0].to_address === toAddress
      })

      tx_responses.forEach((v, i) => {
        v.amount = v.tx.body.messages[0].amount[0].amount

        // 下单金额
        v.placeAmount = toNumber(v.amount)

        // 下单方向
        v.typeName = v.amount.includes('01') ? '单' : '双'

        // 开奖区块
        v.getHeight = Number(v.height) + 3

        // 开奖哈希
        v.hash = ''

        // 中奖金额
        v.getAmount = ''

        // 是否正在查询开奖信息
        v.loading = true

        // 查询开奖信息
        setTimeout(() => {
          this.searchGet(i, v.getHeight)
        }, 0)
      })

      this.records = tx_responses || []
      this.total = pagination.total || 0
    },

    // 查询开奖信息
    searchGet(i, height, loading = false) {
      const v = this.records[i]

      apis.searchGet({ height, loading }).then((res) => {
        const { result } = res

        v.loading = false

        // 开奖哈希
        v.hash = result.block_id.hash
        v.hash = v.hash.replace(v.hash.substring(10, 54), '*******')

        // 中奖金额
        if (v.typeName === '单') {
          if (v.hash.substr(-1) % 2 === 1) {
            v.getAmount = v.placeAmount * 2
          } else {
            v.getAmount = -1
          }
        } else if (v.typeName === '双') {
          if (v.hash.substr(-1) % 2 === 0) {
            v.getAmount = v.placeAmount * 2
          } else {
            v.getAmount = -1
          }
        }
      })
    },

    formatDateTime,
  },
}
</script>

<style lang="scss" scoped>
.record-list {
  &__item {
    position: relative;
    background: url('../assets/img/item_bg.png') no-repeat center / cover;

    .refresh-btn {
      position: absolute;
      top: 20px;
      right: 15px;
    }
  }
}
</style>
